<template>
    <div class="num">
        <div class="content">
            <div class="title">截至北京时间{{covData.modifyTime | time}}
                <ul class="wrap">
                    <li>
                        <span>较昨天{{covData.currentConfirmedIncr | number}}</span>
                        <div class="bold">{{covData.currentConfirmedCount | division}}</div>
                        <strong>现存确诊</strong>
                    </li>
                    <li>
                        <span>较昨天{{covData.suspectedIncr | number}}</span>
                        <div class="bold">{{covData.suspectedCount | division}}</div>
                        <strong>境外输入</strong>
                    </li>
                    <li>
                        <span>较昨天{{covData.seriousIncr | number}}</span>
                        <div class="bold">{{covData.seriousCount | division}}</div>
                        <strong>现存无症状</strong>
                    </li>
                    <li>
                        <span>较昨天{{covData.confirmedIncr | number}}</span>
                        <div class="bold">{{covData.confirmedCount | division}}</div>
                        <strong>累计确诊</strong>
                    </li>
                    <li>
                        <span>较昨天{{covData.deadIncr | number}}</span>
                        <div class="bold">{{covData.deadCount | division}}</div>
                        <strong>累计死亡</strong>
                    </li>
                    <li>
                        <span>较昨天{{covData.curedIncr | number}}</span>
                        <div class="bold">{{covData.curedCount | division}}</div>
                        <strong>累计治愈</strong>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props:['covData'],
    //定义过滤器
    filters:{
        //数字+-
        number:function(val){
            val = val>0?'+' + val:val;
            return val;
        },
        //处理时间格式
        time:function(time){
            var data = new Date(time);
            var y = data.getFullYear();
            var m = data.getMonth()+1;
            var d = data.getDate();
            var h = data.getHours();
            var mi = data.getMinutes();
            var s = data.getSeconds();

            return y+'-'+m+'-'+d+' '+h+':'+mi+':'+s;

            //js方法
            /**
             * num = new Date().toLocaleString("chinese",{hour12:false});
             * return time;
             */
        },

        //每三位数加个,
        division:function(num){
                if(num == undefined) return "";
                console.log('num---',num);
                console.log('格式---',num.toLocaleString());
                return num.toLocaleString();
            }
    },
}   
</script>

<style lang="less" scoped>
.num{
    background: #f5f5f5;
    padding-top: 0.3rem;
    .content{
        background: #fff;
        padding: 0.2rem;
        height: 2rem;
        border-radius: 0.2rem 0.2rem 0 0;
        .title{
            color: #666;
            margin-bottom: 0.2rem;
        }
    }
    .wrap{
        display: flex;
        flex-wrap: wrap;
        padding-top: 0.3rem;
        border-radius: 0.1rem;
        box-shadow: 0 0 3px 2px rgba(194,192,192,0.2);
        li{
            width: 33.33333%;
            text-align: center;
            margin-bottom: 0.2rem;
            .strong{
                color: #333;
            }
        }
        .bold{
            font-weight: bold;
        }
        li:nth-child(1) .bold{
            color:red
        }
        li:nth-child(2) .bold{
            color:green
        }
        li:nth-child(3) .bold{
            color:orange
        }
        li:nth-child(4) .bold{
            color:yellowgreen
        }
        li:nth-child(5) .bold{
            color:teal
        }
        li:nth-child(6) .bold{
            color:slateblue
        }
    }
}
</style>